{extend name="layout" /}

{block name="title"}登录{/block}

{block name="style"}
<script>if(window.top !== window.self){ window.top.location = window.location;}</script>
<style>
    .msg{
        font-size: 12px;
        color: rgba(0,0,0, .6);
        font-weight: bold;
    }
    body {
        background:#F0F2F5 url("/static/backend/bg.jpg");
        background-size:cover;
    }
    .form-control{
        border: none;
        background-color: rgba(255,255,255,.2);
        border-radius:2px;
        color:#000000
    }
    #login{
        color: #ffffff;
        padding: 8px 16px;
        background-color: rgba(0,0,0,.7);
    }
    #video_wrapper {
        position: relative;
        margin: 0px;
        padding: 0px;
    }
    #video_wrapper video {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -100;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
    }
</style>
{/block}

{block name="content"}

<div id="video_wrapper">
    <video autoplay muted loop>
        <source src="/static/backend/bg.mp4" type="video/mp4">
    </video>
</div>

<div class="login">
        <div class="login-box">
            <div class="login-header">
                <h3>Log In</h3>
            </div>
            <div class="login-body">
                <form action="" onsubmit="return false">
                    <div class="form-group">
                        <input type="text" class="form-control" value="admin" id="username" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" value="123123" id="password" placeholder="密码">
                    </div>
                    <div>
                        <p class="msg"></p>
                        <button type="submit" id="login" class="btn btn-block">登录</button>
                    </div>
                </form>
            </div>
            <div class="login-footer">
                <p>Copyright <a href="zsw.ink">@zsw</a></p>
            </div>
        </div>
</div>
{/block}

{block name="script"}
<script>
    jQuery(document).ready(function ($) {
        $(document).keyup(function(event){
            if(event.keyCode ==13){
                $("#login").trigger("click");
            }
        });

        function show(h){
            $('.msg').html(h);
        }

        function hide(){
            $('.msg').attr('class', 'msg').html('');
        }

        $('input').focus(hide)

        $('#login').click(function(){
            var username = $('#username').val();
            var password = $('#password').val();

            if (username == ''){
                show("用户名不能为空");return;
            }

            if (password == ''){
                show("密码不能为空");return;
            }

            $.ajax({
                type: "post",
                url: '/backend/login/submit',
                data: {username:username, password:password},
                dataType: "json",
                success: function(e){
                    if (e.code === 0){
                        show(e.msg)
                        setTimeout(function () {
                            sessionStorage.removeItem('menu_id')
                            location.href = "/"
                        }, 800);
                    }else{
                        show(e.msg)
                    }
                }
            });

        });

    });
</script>
{/block}
